import React from "react";
import { IndexBar, List } from "antd-mobile";
import { useLoaderData, useParams } from "react-router-dom";
import styles from "../css/city.module.css";
function Citylist(props) {
  console.log(props);
  let { list } = useLoaderData();
  let params = useParams();
  console.log(params);

  return (
    <div className={styles.citylist}>
      <IndexBar>
        {list.map((group) => {
          const { title, items } = group;
          return (
            <IndexBar.Panel index={title} title={title} key={title}>
              <List>
                {items.map((item, index) => (
                  <List.Item
                    key={index}
                    onClick={() => props.saveCity(params.type, item.name)}
                  >
                    {item.name}
                  </List.Item>
                ))}
              </List>
            </IndexBar.Panel>
          );
        })}
      </IndexBar>
    </div>
  );
}

export default Citylist;
